<template>
    <div class='home_ren'>
        <div
            class='home_wrap'
            :style='{transform: `translate(${pos.x}px, ${pos.y}px) scale(${ks})`}'
            ref='home_wrap'
        >
            <div class='conten'>
                <img src='/home/PL.jpg' class='bg' />
                <div @click='toInnerHandler("/home/index.html?view=pieton-1.jpg")'>
                    <img
                        src='image/rens.png'
                        style='position: absolute; left: 8%; top: 50%; z-index: 99;'
                        class='huang'
                    />
                </div>
                <div @click='toInnerHandler("/home/index.html?view=pieton-2.jpg")'>
                    <img
                        src='image/rens.png'
                        style='position: absolute; left: 45%; top: 70%; z-index: 99;'
                        class='huang'
                    />
                </div>
                <div @click='toInnerHandler("/home/index.html?view=pieton-3.jpg")'>
                    <img
                        src='image/rens.png'
                        style='position: absolute; right:7.5%; top: 17%; z-index: 99;'
                        class='huang'
                    />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import { AutoUnevent } from '@/utils/utilFun.js';

const event = new AutoUnevent();
export default {
    data() {
        return {
            ks: 1.0,
            t: 0.1,
            pos: {
                x: 0,
                y: 0,
            },
        };
    },
    mounted() {
        const home_wrap = this.$refs['home_wrap'];
    },
    methods: {
        ...mapMutations({
            commitListState: 'viewList/commitListState',
        }),
        strainScale(e) {
            const home_wrap = this.$refs['home_wrap'];
            if (e > 0) {
                this.ks += this.t;
            } else if (e < 0) {
                this.ks -= this.t;
            }
            this.ks = Math.max(0.5, Math.min(2, this.ks));
        },
        offset(x, y) {
            const home_wrap = this.$refs['home_wrap'];
            this.pos.x += x;
            this.pos.y += y;
            home_wrap.setAttribute('style', 'transform:' + 'translate(' + this.pos.x + 'px,' + this.pos.y + 'px )');
        },
        toInnerHandler(to) {
            this.commitListState({
                k: 'viewSrc',
                v: to,
            });
            this.commitListState({
                k: 'nowType',
                v: 'inner',
            });
        },
    },
    computed: {
        ...mapState({
            nowType: state => state.viewList.nowType,
        }),
    },
};
</script>
<style lang='scss' scoped>
.conten {
    position: relative;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
}

.bg {
    width: 100%;
}
.home_wrap {
    width: 100%;
    height: 100%;
}
.home_ren {
    background: #a5a5a5;
    overflow: hidden;
    width: 100%;
    height: 100%;
}
</style>